When reload the page I got 404 error for angular 10.

I am using angular application; I have no problem in running on localhost when I hosted my application on server. When I clicked the employee button it loads the employee details. However I refreshed the same page, I gives me 404 file or directory not found error.

I have fixed the following issue using hash approach. This will make the links look like http://domain.com/#/page for the url  http://domain.com/page.

In app.module.ts, we need to import HashLocationStrategy, LocationStrategy. And then in NgModule Provider add {{provide: LocationStrategy, useClass: HashLocationStrategy}}.

App.Module.Ts

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { HashLocationStrategy, LocationStrategy } from '@angular/common';

@NgModule({

declarations: [

  AppComponent,

],

  imports: [

    BrowserModule,

    AppRoutingModule,

    HttpClientModule,

  ],

  providers: [SharedService,{ provide: LocationStrategy, useClass: HashLocationStrategy}],

  bootstrap: [AppComponent]

})

export class AppModule { }